<template>
  <aigc-card  header="true">
    <template #header
      >用户查询数量趋势
      <div class="float-right mr-[20px] w-[60px]">
        <el-select v-model="checkTime" @change="userqueryChange">
          <el-option
            v-for="item in timeStateArray"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </template>
    <div id="usercheckqueryechart" class="w-full h-[33vh]"></div>
  </aigc-card>
  <!-- 用户查询数量趋势(折线图) -->
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import aigcCard from "@/components/aigcCard"

type EChartsOption = echarts.EChartsOption;

const timeStateArray = ref([
  { value: "year", label: "年" },
  { value: "month", label: "月" },
  { value: "day", label: "日" },
  { value: "hour", label: "小时" },
]);
const checkTime = ref<string>(timeStateArray.value[0].label);
const userqueryChange = (value: any) => {
  // TODO:加载数据刷新用于每小时流量
  console.log(value);
};
const option: EChartsOption = reactive({
  xAxis: {
    type: "category",
    data: ["一", "二", "三", "四", "五", "六", "七"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      smooth: true,
    },
  ],
});
onMounted(async() => {
  const chartDom = await document.getElementById("usercheckqueryechart")!;
  const myChart = await echarts.init(chartDom);
  option && myChart.setOption(option);
});
</script>
